<script lang="ts">
    export default{
        name:'Home',
        //配置组件需要用到的data,methods,计算属性,监听属性,钩子函数等等....
        //`setup`函数会在`beforeCreate`之前调用，它是“领先”所有钩子执行的。
        beforeCreate(){
            console.log('beforeCreate...')
        },
        data(){
            return{
                //`Vue2` 的配置（`data`、`methos`......）中可以访问到 `setup`中的属性、方法。
                //但在`setup`中不能访问到`Vue2`的配置（`data`、`methos`......）。 
                // 如果与`Vue2`冲突，则`setup`优先。
                username:this.name,
                n:200
            }
        },

        setup(){
            //整个setup中都是不允许使用this
            console.log('setup...')
            //定义数据
            let name = 'tom';
            let n = 100;

            //定义方法
            function add(){
                //setup拿不到this
                //这样子的写法,数据不具备响应式
                n++
                console.log('add:'+n)
            }

            //若返回一个对象：则对象中的：属性、方法等，在模板中均可以直接使用
            return {name,n,add}

            //若返回一个函数：则可以自定义渲染内容
            //return ()=>"setup=>若返回一个函数：则可以自定义渲染内容"
        }
    }
</script>
<template>
    <div class="home">
        <h1>姓名:{{name}}</h1>
        <h4>N值:{{ n }}</h4>
        <h3>vue2-data:{{username}}</h3>
        <button @click="add">点我+1</button>
    </div>
</template>
<style>

</style>